<template>
  <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    <el-card>
<!--  用汉语列表 border边框 stripe隔行变色    -->
      <el-table :data="userList" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>//索引列
        <el-table-column label="用户名" prop="username"></el-table-column>/
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>
        <el-table-column label="状态" prop="state" width="70px">
<!--         作用域插槽 -->
          <template slot-scope="scope">
<!--            {{scope.row}} 每一行封存的数据-->
            <el-switch v-model="scope.row.state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
      </el-table>
<!--      分页组件 size-change:每页最大变化数 current-change:当前最大变化数,layout功能组件-->
      <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum"
            :page-sizes="[1, 2, 5, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
      </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getUserList();
  },
  data(){
    return{
      //查询信息实体
      queryInfo:{
        query:"",//查询信息
        pageNum:1,//当前页数
        pageSize:5,//每页最大数
      },
      userList:[],//用户列表
      total:0,//总记录数
      addDialogVisible: true ,// 对话框显示


    }
  },
  methods:{
    //获取所有用户
    async getUserList(){
      const {data:res} = await this.$http.get("allUser",{params:this.queryInfo});
      this.userList =res.data;//用户列表数据封装
      this.total=res.numbers ;//总用户数封装
      },
    getNewUserList(){
      this.queryInfo.pageNum=1;
      this.getUserList();
    },
    //最大数
    handleSizeChange(newSize){
      this.queryInfo.pageSize = newSize;
      this.getUserList();
    },
    //pageNum的触发动作
    handleCurrentChange(newPage){
      this.queryInfo.pageNum=newPage;
      this.getUserList();
    },
    // 关闭窗口
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
  },
}
</script>

<style lang="less" scoped>
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 17px;

}
.el-card{
  box-shadow: 0 1px 1px rgba(0, 8, 10, 0.15) !important;
}

</style>